<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="javascript/jquery.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
    <style>
        .layui-table tbody tr:hover {
            background-color: white;
        }
        #up_table{
            border: 0px white;
        }
    </style>
</head>
<body>
<!--
    @Author: LuXi
    会计报表页
 -->
<section class="page-hd">
    <header>
        <h3 class="title"><font color="#d3d3d3">报表</font>/<font>会计报表</font></h3>
    </header>
    <hr>
</section>

<br/>

<table class="layui-table" lay-skin="row" id="up_table">
    <tr>
        <td><font color="gray" size="5">床位总数（张）</font></td>
        <td><font color="gray" size="5">租赁次数（次）</font></td>
        <td><font color="gray" size="5">总租金收益（元）</font></td>
    </tr>
    <tr>
        <td style="text-align: center;font-size: 50px;padding-top: 30px;"><span id="cw"></span></td>
        <td style="text-align: center;font-size: 50px;padding-top: 30px;"><span id="zl"></span></td>
        <td style="text-align: center;font-size: 50px;padding-top: 30px;"><span id="money"></span></td>
    </tr>
</table>

<br><hr><br>

<table class="layui-table" lay-skin="line" style="text-align: center;">
    <thead>
        <tr>
            <th style="text-align: center;">日期</th>
            <th style="text-align: center;">床位数（张）</th>
            <th style="text-align: center;">租赁次数（次）</th>
            <th style="text-align: center;">租金收益（元）</th>
        </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>

<!--页码-->
<div class="container">
    <div class="row" style="margin-right: 40%;">
        <ul class="pagination pull-right" id="pages">
        </ul>
    </div>
</div>

<input type="hidden" name="pageNum" />

<script>
    layui.use("form",function () {
        var form = layui.form;
    });

    show();
    function show() {
        $.ajax({
            url:"/baobiao/kuaiji",
            type:"get",
            data:{"pageNum":$(":hidden[name=pageNum]").val()},
            success:function (data) {
                if(data.result){
                    var table = "";
                    $.each(data.map.orders,function (index,order) {
                        table += "<tr>";
                        table += "<td>"+order.userorderstarttime.substring(0,order.userorderstarttime.lastIndexOf(":"))+"</td>";
                        table += "<td>"+order.cwCount+"</td>";
                        table += "<td>"+order.zlCount+"</td>";
                        table += "<td>"+order.money+"</td>";
                        table += "</tr>";
                    });
                    $("#zl").text(data.map.zlCount);
                    $("#cw").text(data.map.cwCount);
                    $("#money").text(data.map.moneyCount);
                    $("#tbody").html(table);

                    pageLoad(data.map.pageInfo);
                    pageClick(data.map.pageInfo.pages);
                }else{
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('Error...', {icon: 5});
                    });
                }
            }
        });
    }

    //分页
    function pageLoad(data) {
        var str = "<li><a href='"+(data.pageNum - 1)+"'>上一页</a></li>";
        str += "<li class='active'><a>"+data.pageNum+"</a></li>";
        str += "<li><a href='"+(data.pageNum + 1)+"'>下一页</a></li>";
        str += "<li><a>共"+data.pages+"页</a></li>";
        $("#pages").html(str);
    }
    function pageClick(pages) {
        $("#pages a").click(function () {
            var cutPage = $(this).attr("href");
            if(cutPage > pages){
                cutPage = pages;
            }
            if(cutPage < 1){
                cutPage = 1;
            }
            $(":hidden[name=pageNum]").val(cutPage);
            show();
            return false;
        });
    }
</script>
</body>
</html>